<template>
  <div class="layout">
    <Layout :style="{height: '100%'}">
      <Header >
        <Menu :style="{float: 'left'}" mode="horizontal" theme="dark" active-name="1">
          <h2 class="color-white">数据可视化开发平台</h2>

        </Menu>
        <Button :style="{float: 'right', marginTop: '15px'}" type="default" @click="documentationModalVisible = !documentationModalVisible">系统更新日志</Button>
      </Header>

      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu :active-name="menuActiveName" theme="light" width="auto" :open-names="['1']">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-cog" size="28"/>
                管理
              </template>
              <MenuItem name="ProjectManage" to="/admin/project_manage">工程管理</MenuItem>
              <MenuItem name="CompinfoManage" to="/admin/compinfo_manage">组件库管理</MenuItem>
              <MenuItem name="EchartThemeManage" to="/admin/echart_theme_manage">图表主题管理</MenuItem>
            </Submenu>

          </Menu>
        </Sider>
        <Layout :style="{padding: '0 15px 15px', marginTop: '15px'}">
          <Content :style="{padding: '15px', minHeight: '280px', background: '#fff'}">
            <router-view/>
          </Content>
        </Layout>
      </Layout>
    </Layout>

    <Modal
        v-model="documentationModalVisible"
        draggable
        scrollable
        title="系统更新日志"
        width="850"
        :mask="true"
        :z-index="999">
      <div>
        <Tabs value="1" :style="{marginTop: '-17px'}">
          <ul>
            <li>
              <h4>2019-09-25</h4>
              <p>1、实现响应式网格布局的缩放功能</p>
              <p>2、增加预设像素与设备尺寸的设置</p>
              <p>3、提取封装设计器通用代码块</p>
              <p>4、优化设计器界面</p>
              <p>5、修复一些BUG</p>
            </li>
            <li>
              <h4>2019-09-24（大版本更新）</h4>
              <p>1、实现响应式网格布局设计器</p>
              <p>2、修复一些BUG</p>
            </li>
            <li>
              <h4>2019-09-22</h4>
              <p>1、实现布局块拖拽显示辅助线与位置信息</p>
              <p>2、新增清空参考线功能</p>
              <p>3、调整设计器布局，将缩放功能移至绝对布局设计器模块中</p>
            </li>
            <li>
              <h4>2019-09-21</h4>
              <p>1、绝对布局设计器增加标尺功能</p>
              <p>2、修复标尺内容滚动条位置异常的BUG</p>
              <p>3、优化设计器页面</p>
              <p>4、画布宽高单位取消em和rem单位</p>
            </li>
            <li>
              <h4>2019-09-20</h4>
              <p>1、新增收展右侧边栏功能</p>
            </li>
            <li>
              <h4>2019-09-19</h4>
              <p>1、封装组件库</p>
              <p>2、优化设计器表单样式</p>
              <p>3、绝对布局布局块放置增加状态样式</p>
              <p>4、修复画布因为背景图片的影响不显示网格的BUG</p>
              <p>5、增加绝对布局设计模式下画布缩放功能，并设置缩放系数为0.2</p>
              <p>6、修复在缩放模式下方向键无法调整位置的BUG</p>
            </li>
            <li>
              <h4>2019-09-18</h4>
              <p>1、绝对布局设计器布局块右键菜单增加置顶功能</p>
              <p>2、布局块右键菜单增加切换拖拽状态功能</p>
              <p>3、绝对布局设计器新增ctrl + a全选功能</p>
              <p>4、修复组件库展开的BUG</p>
            </li>
            <li>
              <h4>2019-09-17</h4>
              <p>1、实现设计器结构树切换显示隐藏布局块功能，优化设计器代码目录结构</p>
            </li>
            <li>
              <h4>2019-09-10</h4>
              <p>1、增加框选功能</p>
            </li>
          </ul>
        </Tabs>

      </div>
      <div slot="footer">
        <Button type="default" @click="documentationModalVisible = false">关闭</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
  export default {
    name: 'Admin',
    data() {
      return {
        menuActiveName: '',
        documentationModalVisible: false
      }
    },
    mounted() {
      this.menuActiveName = this.$route.name;
    },
    methods: {},
    computed: {}
  }
</script>

<style scoped>
  .layout{
    height: 100%;
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: auto;
  }
  .layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }
  .layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }
</style>
